<template>
  <section class="product-section pt-100 pb-100">
    <div class="container">
      <div class="product-header">
        <div class="result-block product-header-item">
          <h2>Our Products</h2>
          <p>(Showing <span>16</span> out of <span>120</span>)</p>
        </div>
        <div class="sidebar-search product-header-item">
          <form>
            <input
              type="text"
              class="form-control"
              placeholder="Search products"
            />
            <button class="btn main-btn main-btn-secondary" type="submit">
              <i class="flaticon-search"></i>
            </button>
          </form>
        </div>
      </div>
      <div class="product-filter">
        <ul class="product-filter-list">
          <li>
            <a href="javascript:;" class="active">All</a>
          </li>
          <li>
            <a href="javascript:;">Daily Sales</a>
          </li>
          <li>
            <a href="javascript:;">New</a>
          </li>
          <li>
            <a href="javascript:;">Best Seller</a>
          </li>
        </ul>
        <div class="product-filter-action">
          <ul class="product-filter-views">
            <li>
              <a
                href="javascript:;"
                :class="'grid' == currentComponentName ? 'active' : ''"
                @click="changeComponent('grid')"
              >
                <i class="flaticon-dots-menu"></i>
              </a>
            </li>
            <li>
              <a
                href="javascript:;"
                :class="'full' == currentComponentName ? 'active' : ''"
              >
                <i class="flaticon-menu" @click="changeComponent('full')"></i>
              </a>
            </li>
          </ul>
          <button
            class="btn main-btn main-btn-secondary filter-button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasExample"
            aria-controls="offcanvasExample"
          >
            <i class="flaticon-filter"></i> Filter
          </button>
        </div>
      </div>
      <component :is="componentMap[currentComponentName]"></component>
    </div>
  </section>
  <!-- 隐藏-->
  <div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="offcanvasExample"
    aria-labelledby="offcanvasExampleLabel"
  >
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">
        <!-- Product Categories -->
      </h5>

      <button
        type="button"
        class="offcanvas-offcanvas-btn"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
      >
        <i class="flaticon-close"></i>
      </button>
    </div>
    <div class="offcanvas-body">
      <aside class="filter-modal-item">
        <h3>Product Categories</h3>
        <ul class="filter-cat">
          <li>
            <a href="javascript:;" class="active">Sofa</a>
          </li>
          <li>
            <a href="javascript:;">Chair</a>
          </li>
          <li>
            <a href="javascript:;">Bed</a>
          </li>
          <li>
            <a href="javascript:;">Plastic Stool</a>
          </li>
          <li>
            <a href="javascript:;">Wooden</a>
          </li>
          <li>
            <a href="javascript:;">Gaming Chair</a>
          </li>
          <li>
            <a href="javascript:;">Outside Chair</a>
          </li>
        </ul>
      </aside>
      <aside class="filter-modal-item">
        <h3>Filter By Price</h3>
        <form class="price-range-content">
          <div
            class="price-range-bar ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
            id="range-slider"
          >
            <div
              class="ui-slider-range ui-corner-all ui-widget-header"
              style="left: 0%; width: 100%"
            ></div>
            <span
              tabindex="0"
              class="ui-slider-handle ui-corner-all ui-state-default"
              style="left: 0%"
            ></span
            ><span
              tabindex="0"
              class="ui-slider-handle ui-corner-all ui-state-default"
              style="left: 100%"
            ></span>
          </div>
          <div class="price-range-filter">
            <div class="price-range-filter-item">
              <h4>Price:</h4>
              <input type="text" id="price-amount" readonly="" />
            </div>
            <div class="price-range-filter-item price-range-filter-button">
              <a href="javascript:;" class="btn main-btn main-btn-secondary"
                >Filter</a
              >
            </div>
          </div>
        </form>
      </aside>
      <aside class="filter-modal-item">
        <h3>Filter By Color</h3>
        <ul class="filter-color">
          <li>
            <a href="javascript:;">
              <div class="filter-color-radio filter-color-radio-green"></div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="filter-color-radio filter-color-radio-red"></div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="filter-color-radio filter-color-radio-yellow"></div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="filter-color-radio filter-color-radio-brown"></div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="filter-color-radio filter-color-radio-blue"></div>
            </a>
          </li>
        </ul>
      </aside>
      <aside class="filter-modal-item">
        <h3>Filter By Size</h3>
        <ul class="filter-size">
          <li>
            <a href="javascript:;">3X</a>
          </li>
          <li>
            <a href="javascript:;">2X</a>
          </li>
          <li>
            <a href="javascript:;">X</a>
          </li>
          <li>
            <a href="javascript:;">L</a>
          </li>
          <li>
            <a href="javascript:;">M</a>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</template>

<script setup>
import ShopFullComponent from "./components/ShopFullComponent.vue";
import ShopGridComponent from "./components/ShopGridComponent.vue";

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  currentComponentName: "grid",
  componentMap: {
    full: ShopFullComponent,
    grid: ShopGridComponent,
  },
  currentComponent: ShopGridComponent,
});
const { currentComponent, currentComponentName, componentMap } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const changeComponent = (name) => {
  data.currentComponentName = name;
  data.currentComponent = data.componentMap[name];
};
</script>
<style lang="scss" scoped></style>
